<template>
  <div v-cloak>
    <!--
  v-html:类似于innerHTML
  作用：富文本解析
  v-text:类似innerText
  作用：将标签内的内容替换成它的值
  v-if:控制标签是否渲染
  v-if="boolean"
  true:渲染  false:不显示
  v-if  v-else-if   v-else
  注意点：它们只能用在相邻的兄弟标签
  v-model:值的双向绑定
  作用：表单元素(input,checkbox,select...)值的双向绑定
  修饰符:.trim 去掉首尾空格
         .number:转换为数字
         .lazy 延迟处理
   v-on:事件绑定
  语法:  @事件名="方法/简短的js"
  v-bind:属性绑定
  :属性名="属性值"
  class绑定
     :class="{类名:boolean值}"
     :class="['class类名']"
     :class="'class类名'"
  style绑定
     :style="{属性名:属性值}"
  v-for:循环数组或者对象或者数字
     v-for:数组
        v-for="(item,index) in [1,2,3]"
        item:数组每一项
        index:下标
     v-for:对象
        {
          key:value,   0
          key2:value2  1
        }
      v-for="(value,key,index) in 对象"
   v-for应用于数字
     v-for="(item,index) in 3"
        3===[1,2,3]
  v-show
     控制标签是否显示
     实际控制标签的display:none属性
   v-if与v-show区别
     v-if:控制标签是否渲染
     v-show:控制标签的display属性(是否显示)
    v-once:只执行一次渲染
    v-cloak:在vue实例化完成后它会消失
  v-cloak
     [v-cloak]{
      display:none
     }
  v-pre:保持原样输出，一次vue语法都不执行

-->
    <div v-html="str"></div>
    <div v-text="str"></div>
    <hr />
    <div v-if="bol">hello</div>
    <div v-else>123</div>
    <button @click="bol = !bol">切换</button>
    <h3>{{ msg }}</h3>
    <input type="text" v-model="msg" />
    <button @click="btnClick(1, $event)">绑定事件</button>
    <div :xxx="1">v-bind绑定</div>
    <button @click="classBol = !classBol">控制class应用</button>
    <div :class="{ active: classBol }"></div>
    <input type="text" v-model="h" />
    <div class="box" :style="{ height: h + 'px' }"></div>
    <!-- <ul>
      <li v-for="(item, index) in arr" :key="index">{{ item }}</li>
    </ul>
    <hr />
    <h3 v-for="(item, key, index) in obj" :key="index">
      {{ item }}-----{{ key }}----{{ index }}
    </h3>
    <h4 v-for="(item, index) in 3" :key="index">{{ item }}</h4> -->
    <div v-for="(item, index) in obj.xxx" :key="index"></div>
    <hr />
    <button @click="showBol = !showBol">切换显示</button>
    <div v-show="showBol" v-once>{{ msg }}</div>
    <div v-pre>{{ msg }}</div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      str: '<h2>我们是98期的</h2>',
      bol: true,
      msg: 'hello',
      classBol: true,
      h: 0,
      arr: ['a', 'b', 'c'],
      obj: {
        aaa: '我是aaa的值'
      },
      showBol: true
    }
  },
  methods: {
    btnClick (e, k) {
      console.log('事件对象', e, k)
    }
  }
}
</script>
<style>
.active {
  width: 300px;
  height: 300px;
  background-color: #f00;
}
.box {
  width: 500px;
  background-color: #00f;
}
</style>
